Flash图片滑动展示效果 |
您所在的位置：网站首页 › flash 图片向左滑动渐变消失了 › Flash图片滑动展示效果 |
|
看了 lulu studio和 cloudgramer 的图片展示效果，觉得用Flash做一个也应该不难，于是抽空动手写了一个，下面是效果： 程序原理： 在js中，可以用到left来改变图片的位置，在Flash中，当然是通过X坐标来进行改变了。开始的时候，将图片等分排列，代码如下： public function arrange():void { for (var i:uint = 0; i < numimage; i++ ) { addChildAt(images[i], i); images[i].setTargetX(stage.stageWidth / numimage * i);//设置图片的X坐标为 images[i].addEventListener(Event.ENTER_FRAME, onEnterFrame); images[i].addEventListener(MouseEvent.MOUSE_OVER, onMouseMove); } }这里要注意的地方就是深度问题，要想四张图片都看得见，图片的深度必须是从低到高，也就是从0至图片的个数-1。 当鼠标经过的时候，要重新布局 //重新排列图片的方位 private function reArrange(flag:uint):void { //trace("图片长度为:" + images[0].width); //trace("flag:"+flag) //初始化第一张图片的地址 images[0].x = 0; images[0].setTargetX(0); for (var i:uint = 1; i < numimage; i++ ) { var rate:Number = (i - flag) == 1 ?1:0;//判断是否碰到用户点击的那张图片 var averx:Number = (stage.stageWidth - images[0].width) / (numimage-1);//判断除第展开那张外，其它剩余每张所占距离 var mytargetX:Number = images[i - 1].getTargetX() + Math.abs(1 - rate) * averx + rate * images[0].width;//要将图片放置的x座标 images[i].setTargetX(mytargetX);//设置目标X坐标 images[i].addEventListener(Event.ENTER_FRAME, onEnterFrame);//移动到目标地址 //trace("rate:" + rate + " averx:" + averx + "第" + (i + 1) + "张图片x:" + mytargetX); } }布局的时候分为鼠标经过图片之前与之后两个部分。 不是鼠标经过部分的长度为(stage.width-图片长度)/(图片个数-1)。第一张图片的x座标肯定为0，以后根据前一张的x座标来算出自己的座标。如鼠标经过第三张，那个第二张的x座标为第一张的x座标+(stage.width-图片长度)/(图片个数-1)，第三张的x座标的为第二张的x座标+图片长度。 滑动部分是用缓动来进行的。 所谓的缓动就是物体向目标距离移动，刚开始运行速度快，后来运行速度慢。代码比较简单： //移动到目标地址 private function onEnterFrame(event:Event):void { var targetX:Number = event.target.getTargetX(); //trace("从" + event.target.x + "移动第"+event.target.place+"张图片到"+ targetX); event.target.x += (targetX - event.target.x) * easing; if (Math.abs(event.target.x-targetX) |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |